<template>
	<el-card style="margin: 15px; min-height: calc(100vh - 80px)">
		<div>
			<!--    功能区-->
			<div style="margin: 10px 0">
				<!--    搜索区-->
				<div style="margin: 10px 0">
					<el-input v-model="searchPARAM.name" clearable placeholder="请输入美食名" prefix-icon="Search"
						style="width: 20%" />
					<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
					<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
					<div style="float: right">
						<el-tooltip content="添加" placement="top">
							<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
						</el-tooltip>
					</div>
				</div>
			</div>
		</div>
		<!--表格-->
		<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
			<el-table-column type="expand">
				<template #default="props">
					<p>名称: {{ props.row.name }}</p>
					<p>类型: {{ props.row.type }}</p>
					<p>美食介绍:</p>
					<p> {{ props.row.content }}</p>
					<p>餐厅名字: {{ props.row.restaurantName }}</p>
					<p>餐厅地址: {{ props.row.restaurantAddress}}</p>
				</template>
			</el-table-column>
			<el-table-column label="#" type="index" />
			<el-table-column label="名称" prop="name" sortable />
			<el-table-column label="类型" prop="type" />
			<el-table-column label="图片" prop="img">
				<template v-slot="scope">
					<el-image style="width: 100px; height: 100px" :src="this.imgUrl+scope.row.img" :fit="fit" />
				</template>
			</el-table-column>
			<el-table-column label="餐厅名" prop="restaurantName" />
			<el-table-column label="餐厅地址" prop="restaurantAddress" :show-overflow-tooltip="true" />
			<el-table-column label="美食介绍" prop="content" :show-overflow-tooltip="true" />



			<!--      操作栏-->
			<el-table-column label="操作" width="130px">
				<template #default="scope">
					<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
						<template #reference>
							<el-button icon="Delete" type="danger"></el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div style="margin: 10px 0">
			<el-pagination v-model:currentPage="pageNum" :page-size="pageSize" :page-sizes="[5, 10, 20]" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>

		<!--弹窗-->
		<el-dialog v-model="dialogVisible" title="操作" width="40%" @close="cancel">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="类型"  prop="type">
					<el-select v-model="form.type" style="width: 50%" placeholder="请选择类型">
						<el-option label="肉禽类" value="肉禽类" />
						<el-option label="米面豆类" value="米面豆类" />
						<el-option label="蔬菜类" value="蔬菜类" />
					</el-select>

					<!-- <el-input v-model="form.type" style="width: 50%"></el-input> -->
				</el-form-item>
				<el-form-item label="餐厅名" prop="restaurantName">
					<el-input v-model.number="form.restaurantName" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="餐厅地址" prop="restaurantAddress">
					<el-input v-model="form.restaurantAddress" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="img">
					<el-upload class="avatar-uploader" action="" :http-request="upload" :show-file-list="false">
						<img v-if="fromImg" :src="fromImg" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="美食介绍" prop="content">
					<el-input v-model="form.content" type="textarea" :rows="10" style="width: 90%"></el-input>
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</span>
			</template>
		</el-dialog>


	</el-card>

</template>

<script src="@/assets/js/Food.js"></script>





<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
	}
</style>
